<template>
  <div class="service-card" @click="handleClick">
    <div class="service-icon">
      <el-icon :size="48">
        <component :is="icon" />
      </el-icon>
    </div>
    <div class="service-content">
      <h3 class="service-title">{{ title }}</h3>
      <p class="service-description">{{ description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ServiceCard',
  props: {
    icon: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      required: true
    },
    link: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick() {
      if (this.link) {
        this.$router.push(this.link);
      }
    }
  }
}

</script>

<style lang="scss">
.service-card {
  background-color: $background-color-white;
  border-radius: $border-radius-base;
  padding: $spacing-large;
  text-align: center;
  transition: $transition-base;
  cursor: pointer;
  box-shadow: $box-shadow-light;

  &:hover {
    transform: translateY(-5px);
    box-shadow: $box-shadow-base;
  }
}

.service-icon {
  margin-bottom: $spacing-base;
  color: $primary-color;
}

.service-title {
  font-size: $font-size-large;
  color: $text-primary;
  margin-bottom: $spacing-small;
}

.service-description {
  font-size: $font-size-base;
  color: $text-regular;
  line-height: 1.5;
}
</style>
